<template>
  <el-col :span="24" class="out-box">


    <el-col :span="4" style="height: 10px">
      <el-col :span="3" style="height: 400px;position: fixed"
              class="bg-white ms-4 br animate__animated animate__backInDown">

        <el-col :span="24" class="mt-3">
          <el-input placeholder="请输入内容" v-model="essayInput"></el-input>
          <el-button class="w-100" @click="searchEssay">查找文章</el-button>
        </el-col>

        <el-col :span="24" class="mt-5">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>文章推荐</span>
            </div>
            <div v-for="items in messageList.data" :key="items.essayId" class="text item"
                 style="overflow: hidden;text-overflow: ellipsis ;text-align: left">
              <!--              <el-link :href="'wordPractice?a='+items.essayId" target="_blank">{{items.essayTitle}}</el-link>-->
              <router-link :to="{name:'essay',query:{essayId:items.essayId}}" target="_blank" class="link-secondary"
                           tag="a" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                {{ items.essayTitle }}
              </router-link>
            </div>
          </el-card>
        </el-col>

      </el-col>


    </el-col>

    <el-col :span="16" class="bg-white br">
      <router-view>
      </router-view>
    </el-col>

    <el-col :span="4">
      <el-col style="position: fixed;width: 15%" class="ms-3 animate__animated animate__backInDown">
        <el-col :span="24" class="bg-white br border">
          <el-col :span="24" style="height: 50px;float: left">
            <div class="h-100 ms-3 mt-1" style="text-align: left;float: left">
              <img src="@/assets/test.jpg" class="h-100">
            </div>
            <!--            position: relative;bottom: 40px;left: 60px;-->
            <div class="h-100 mt-1 ms-2" style="margin-right: 50%;overflow: hidden">

              <el-badge is-dot :type="onlineType" style="font-size: 22px;overflow: hidden;text-overflow: ellipsis"
                        class="w-100">
                {{ user.nickname }}
                <!--                544985365-->
              </el-badge>

              <el-dropdown class="">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="cut(1)">在线</el-dropdown-item>
                  <el-dropdown-item @click.native="cut(2)">隐身</el-dropdown-item>
                  <el-dropdown-item @click.native="cut(3)">离线</el-dropdown-item>
                  <el-dropdown-item @click.native="cut(4)">自定义状态</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>


          </el-col>

          <el-col :span="24" class="d-flex justify-content-around mt-3">
            <el-col :span="6">
              <el-col :span="24">16</el-col>
              <el-col :span="24">好友数量</el-col>
            </el-col>
            <el-col :span="6">
              <el-col :span="24">32</el-col>
              <el-col :span="24">文章数量</el-col>
            </el-col>
            <el-col :span="6">
              <el-col :span="24">6</el-col>
              <el-col :span="24">推荐数量</el-col>
            </el-col>
          </el-col>

          <!--          <el-col :span="24" class="border-top mt-2"></el-col>-->

        </el-col>

        <el-col :span="24" class="mt-3 animate__animated animate__backInDown">
          <el-card>
            <div slot="header" class="clearfix">
              <span>每日一记</span>
            </div>
            <div>
              <p style="font-size: 22px" class="text-info">{{ word.data.word }}</p>
              <p v-html="word.data.tran">
              </p>

            </div>
          </el-card>
        </el-col>
        <!--        "tem":"25", //实况温度-->
        <!--        "tem_day":"30", //白天温度(高温)-->
        <!--        "tem_night":"23", //夜间温度(低温)-->
        <!--        "win":"南风", //风向-->
        <!--        "win_speed":"3级", //风力-->
        <!--        "win_meter":"19km\/h", //风速-->
        <!--        "air":"53", //空气质量-->
        <!--        "pressure":"987", //气压-->
        <!--        "humidity":"27%" //湿度-->

        <el-col :span="24" class="mt-3 animate__animated animate__backInDown">
          <el-card>
            <el-col :span="20" class="ms-3 weather-items" style="text-align: left">
              <p style="font-size: 18px">{{ weather.date }} {{ weather.week }}</p>
              <p>当前城市:<span class="text-info">{{ weather.city }}</span></p>
              <p>天气情况:{{ weather.wea }}</p>
              <p>实况温度:{{ weather.tem }}℃</p>
              <p>白天温度:{{ weather.tem_day }}℃</p>
              <p>夜晚温度:{{ weather.tem_night }}℃</p>
              <p>风向:{{ weather.win }}</p>
              <p>风力:{{ weather.win_speed }}</p>
              <p>空气质量:{{ weather.air }}</p>
            </el-col>
          </el-card>

        </el-col>

      </el-col>


    </el-col>

  </el-col>
</template>

<script>
import $http from '@/axios/api'

export default {
  name: 'HomeBody',
  data () {
    return {
      user: JSON.parse(localStorage.getItem('user')),
      onlineType: 'success',
      messageList: {},
      word: {
        data: {
          tran: '',
          word: ''
        }
      },
      weather: {},
      essayInput: ''
    }
  },
  mounted () {
    $http.getRecommendMessage().then(res => {
      this.messageList = res.data
    })
    $http.getRandomWord().then(res => {
      console.log(+res)
      this.word = res.data
    })
    $http.getWeather().then(res => {
      this.weather = res.data
    })
  },
  methods: {
    cut (type) {
      console.log(123)
      switch (type) {
        case 1:
          this.onlineType = 'success'
          break
        case 2:
          this.onlineType = 'info'
          break
        case 3:
          this.onlineType = 'error'
          break
        case 4:
          this.onlineType = 'warning'
          break
      }
    },
    cutMessage (id) {
      console.log(id)
    },
    searchEssay () {
      if (this.essayInput != '') {
        // this.$http.searchEssayList({ msg: this.essayInput }).then(res => {
        //   this.messageList = res.data
        // })

      }
    }
  }
}
</script>

<style scoped>
.br {
  border-radius: 15px;
}

.weather-items:nth-child(n+1) {
  font-size: 11px;
}
</style>
